<template>
  <div class="ChatListapp">
    <div class="m-content">
      <div class="ChatListContainer">

        <div class="dialog-history-container">
          <div class="dialog-header">
            <h3 class="dialog-header-title">往期对话</h3>
          </div>
          <div class="dialog-list">
            <div class="chatpage-card-item" v-for="dialog in dialogs" :key="dialog.titleId" @click="changeDialog(dialog.titleId)">
              <div class="chatpage-item-content">
                <h3 class="chatpage-item-title">{{ dialog.title }}</h3>
                <div class="chatpage-item-icons">
                  <span class="star-icon">⭐</span>
                  <span class="delete-icon" @click="deleteDialog(dialog.titleId)">🗑️</span>
                </div>
              </div>
              <div class="chatpage-item-footer">
                <p class="item-date">{{ dialog.date }}</p>
                <span class="item-text">共{{ dialog.total }}条对话</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div style="display: flex; justify-content: center;">
    <Sidebar />
  </div>
</template>

<script setup lang="ts">
import Sidebar from '@/components/Sidebar.vue';

import { onMounted, reactive, ref } from 'vue'
import axios from 'axios'
import router from '@/router'

const nowTitleId = ref(-1)
const messages = reactive([])
const dialogs = reactive([])

const getDialog = async () => {
  dialogs.splice(0)
  await axios.get('student/AI/allConversation')
    .then(res => {
      console.log(res.data.data)
      for (let i = 0; i < res.data.data.length; i ++) {
        dialogs.push({
          titleId: res.data.data[i].titleId,
          title: res.data.data[i].title,
          date: res.data.data[i].newTime,
          total: res.data.data[i].total
        })
      }
    })
}

onMounted( async () => {
  getDialog()
})

const createNewQADialog = async (createTitle: string, type: number) => {
  let tempTitleId = nowTitleId.value
  await axios.get('student/AI/nowTitleId')
    .then(res => {
      console.log(res.data.data)
      tempTitleId = res.data.data
      messages.splice(0)
    })
  console.log('tempTitleId', tempTitleId)
  if (tempTitleId != nowTitleId.value) {
    await axios.post('student/AI/createConversation', { titleId: tempTitleId, title: createTitle, moduleId: type })
      .then(res => {
        getDialog()
        nowTitleId.value = tempTitleId
        changeDialog(tempTitleId)
      })
  }
}

const deleteDialog = async (titleId) => {
  console.log('delete titleId', titleId)
  await axios.get('student/AI/deleteConversation?titleId=' + titleId)
    .then(res => {
      console.log(res)
      getDialog()
    })
}

const changeDialog = async (titleId) => {
  router.push('/chat/' + titleId)
}

</script>

<style>
.ChatListapp {
  height: 100%;
  width: 100%;
}
.m-content {
  background-color: #ffffff;
}
.ChatListContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-right: 0;
  padding-right: 0;
}

.dialog-history-container {
  width: 400px;
  margin-right: 0;
  border-radius: 8px;
}
.dialog-header {
  background-color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #409eff;
  font-size: 23px;
}

.dialog-header-title {
  align-self: flex-start;
  padding-left: 20px;
}

.button-group {
  display: flex;
  gap: 10px;
  padding: 10px;
}

.button-group button {
  padding: 5px;
  height: 50px;
  width: 135px;
  font-size: 20px;
  font-weight: bold;
}

.dialog-list {
  width: 100%;
  height: 39rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto; /* 设置纵向滚动 */
}
.chatpage-card-item {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;
  transition: transform 0.2s;
  cursor: pointer;
  height: 75px;
  width: 350px;
}
.chatpage-card-item:hover {
  transform: translateY(-2px);
}
.chatpage-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chatpage-item-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.item-date {
  font-size: 14px;
  color: #666;
}
.chatpage-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chatpage-item-icons {
  display: flex;
  gap: 10px;
}
.star-icon {
  color: #ffc107;
  cursor: pointer;
}
.delete-icon {
  color: #dc3545;
  cursor: pointer;
}
</style>
